<template>
	<view class="wrap">
		<view class="top-banner">
			<image class="" style="width: 100%; height:180px;" src="https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/40f33089-071e-4f6f-a6b8-cd3ecdc9d157.png" mode="aspectFit"></image>
		</view>
		
		<mescroll-body top="0" down="0" :bottombar="false" @init="mescrollInit" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback">
			<uni-list>
				<uni-list-item direction="row" v-for="item in dataList" :key="item._id"
					:to="'./detail?id='+item._id">
					<template slot="body">
						<view class="uni-list-box uni-content">
							<view class="uni-title-sub uni-ellipsis-2">{{item.title}}</view>
							<view class="uni-note">
								<text>{{vk.pubfn.timeFormat(item.publish_time, 'yyyy年MM月dd日')}}</text>
								<text></text>
							</view>
						</view>
					</template>
					<template slot="footer">
						<view class="uni-thumb" style="margin: 0;">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 下拉刷新和上拉加载的组件
		data() {
			return {
				dataList: [],
				// 列表查询请求数据
				queryForm1: {
					// 分页数据
					pagination: {
						pageIndex: 1, //当前页码
						pageSize: 10, //每页显示数量
					},
					// 表单数据源
					formData: {
						title: "", // 标题
						keywords: "", // 关键字
					},
					// 查询匹配规则
					columns: [{
							key: "title",
							mode: "%%"
						},
						{
							key: "keywords",
							mode: "%%"
						},
					],
					// 排序规则
					sortRule: [{
							name: "publish_time",
							type: "desc"
						}, // desc降序 asc升序
					]
				},
				downOption: {
					auto: false, //是否在初始化后,自动执行上拉回调callback; 默认true					
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行上拉回调callback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 12 // 每页数据的数量
					},
					noMoreSize: 8, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textNoMore: '没有更多数据',
					empty: {
						tip: '~ 搜索无结果 ~', // 提示
						btnText: ''
					}
				},
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		methods: {
			initPage() {

			},
			pageTo(path){
				vk.navigateTo(path);
			},
			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			// 底部上划，获取列表
			upCallback(page) {
				vk.callFunction({
						url: this.$api.ExampleList,
						loading: true,
						data: {
							...this.queryForm1,
							pagination: {
								pageIndex: page.num, //当前页码
								pageSize: page.size, //每页显示数量
							},
						},
					})
					.then(res => {
						// console.log('获取列表res', res)

						this.mescroll.endSuccess(res.rows.length);
						if (res.code == 0) {
							if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
							this.dataList = this.dataList.concat(res.rows); //追加新数据
						} else vk.toast('暂无搜索内容');
					}).catch((err) => {
						console.log('联网失败, 结束加载', err)
						this.mescroll.endErr();
						vk.toast('暂无搜索内容');
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.uni-flex {
		display: flex;
	}
	
	.uni-flex-row {
		@extend .uni-flex;
		flex-direction: row;
		box-sizing: border-box;
	}
	
	.uni-flex-column {
		@extend .uni-flex;
		flex-direction: column;
	}
	
	.uni-color-gary {
		color: #3b4144;
	}
	
	/* 标题 */
	.uni-title {
		display: flex;
		margin-bottom: $uni-spacing-col-base;
		font-size: $uni-font-size-lg;
		font-weight: bold;
		color: #3b4144;
	}
	
	.uni-title-sub {
		display: flex;
		// margin-bottom: $uni-spacing-col-base;
		font-size: $uni-font-size-base;
		font-weight: 500;
		color: #3b4144;
	}
	
	/* 描述 额外文本 */
	.uni-note {
		margin-top: 10px;
		color: #999;
		font-size: $uni-font-size-sm;
	}
	
	/* 列表内容 */
	.uni-list-box {
		@extend .uni-flex-row;
		flex: 1;
		margin-top: 10px;
	}
	
	/* 略缩图 */
	.uni-thumb {
		flex-shrink: 0;
		margin-right: $uni-spacing-row-base;
		width: 125px;
		height: 75px;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;
		border: 1px #f5f5f5 solid;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.uni-media-box {
		@extend .uni-flex-row;
		// margin-bottom: $uni-spacing-col-base;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;
		.uni-thumb {
			margin: 0;
			margin-left: 4px;
			flex-shrink: 1;
			width: 33%;
			border-radius:0;
			&:first-child {
				margin: 0;
			}
		}
	}
	
	/* 内容 */
	.uni-content {
		@extend .uni-flex-column;
		justify-content: space-between;
	}
	
	/* 列表footer */
	.uni-footer {
		@extend .uni-flex-row;
		justify-content: space-between;
		margin-top: $uni-spacing-col-lg;
	}
	.uni-footer-text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-left: 5px;
	}
	
	/* 标签 */
	
	.uni-tag {
		flex-shrink: 0;
		padding: 0 5px;
		border: 1px $uni-border-color solid;
		margin-right: $uni-spacing-row-sm;
		border-radius: $uni-border-radius-base;
		background: $uni-bg-color-grey;
		color: $uni-text-color;
		font-size: $uni-font-size-sm;
	}
	
	/* 链接 */
	.uni-link {
		margin-left: 10px;
		color: $uni-text-color;
		text-decoration: underline;
	}
	
	// 微信小程序中左文右图时，文字不够长导致图片左移
	/* #ifndef H5 || APP-VUE */
	::v-deep .uni-list-item__header+view {
		width: 100%;
	}
	/* #endif */
	
	.list-picture {
		width: 100%;
		height: 145px;
	}
	
	.thumb-image {
		width: 100%;
		height: 100%;
	}
</style>